<template>
	<view class="container">
		<view class="up_container">
			<view class="weather">
				<h1 class="sheshidu">℃</h1>
				<h1 class="temperature">20</h1>
				<p class="p1">29/12°</p>
				<p class="p2">阴|空气良</p>
			</view>
			<view class="sport_image">
			</view>
		</view>
		<view class="down_container">
			<view class="sport">
				<image src="../../static/tabs/sport.jpg"></image>
			</view>
			<button @click="goToSportPage">我要运动</button>
			<button @click="checkGroupStatus">查看参团情况</button>
		</view>
		
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			goToSportPage() {
				uni.navigateTo({
					url: '/pages/version1/match'
				});
			},
			checkGroupStatus() {
				uni.navigateTo({
					url: '/pages/version1/actor'
				});
			}
		}
	}
</script>

<style scoped>		
.up_container{
		display: flex;
		margin-top: 60rpx;
	}
	
.sport_image{
	background-image: url("../../static/tabs/badminton.jpg");
	width: 390rpx;
	background-size: 100% 100%;
	
}
.sheshidu{
	justify-content: right;
	text-align: right;
	margin-right: 20rpx;
}
.temperature{
	font-size: 150rpx;
	font-weight: bolder;
	justify-content: center;
	text-align: center;
	margin-top: -20rpx;
}
.weather{
	width: 360rpx;
	height: 400rpx;
	background-color: blanchedalmond;
}
.weather .p1{
	display: flex;
	justify-content: center;
	text-align: center;
	margin-top: 40rpx;
}
.weather .p2{
	display: flex;
	justify-content: center;
	text-align: center;
	margin-top: 10rpx;
}
	
.sport image{
	width: 600rpx;
	height: 400rpx;
	margin-left: 90rpx;
	margin-top: 100rpx;
}
.down_container button{
	border: 1px solid;
	border-radius: 20px;
	background-color: lightblue;
	width: 600rpx;
	margin-top: 50rpx;
	height: 85rpx;
}
</style>